@import '@/styles/token';

.container {
  // background-color: @colorBgLayout;
  position: relative;

  // 背景图片样式
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: @backgroundImage;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background-image 0.3s ease;
  }
}

// 移动端菜单容器隐藏时的样式
.mobile-menu-container-hidden {
  width: 0 !important;
}

.page-container {
  background: @pageContainerBg;
  border-left: 0 solid @pageContainerBorderColor;
  margin: @marginXs;
  margin-left: 0;
  border-radius: @pageContainerBorderRadius;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 8%);
  z-index: 1;
  // 确保内容区域有半透明背景，提高可读性
  transition: all 0.3s ease;
  position: relative;

  // 风格2的适配
  &.xagi-nav-style2 {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    // background: var(--xagi-color-bg-container);
    &.xagi-layout-collapsed {
      border-left-width: 0;
      border-radius: 12px 0 0 12px;
    }

    &.xagi-layout-expanded {
      border-left-width: @lineWidth;
      border-radius: 0;
    }
  }
}
